import React, { Component } from 'react';
import { Col, Row, List, Button  } from 'antd';
import { UnorderedListOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import Wheaders from '../../components/Headers';
import Http from '../../util/http';
import './index.less';

class Catalogue extends Component {
    constructor(props){
        super(props);
        this.state = {
            novelInfo: props.location.state.novelInfo,
            newChapter: {},
            chapterList: [],
            sequence: true,
        }
    }

    render() {
        const { novelInfo, chapterList, newChapter, sequence } = this.state;

        return (
            <div className='catalogue-page'>
                <Wheaders left={'返回'} middle={'目录'} right={'我的'} />
                <div className={'main'}>
                    <div className={'sorting'}>
                        <Button type={'text'} onClick={() => {
                            this.setState({ sequence: !this.state.sequence, chapterList: this.state.chapterList.reverse() })
                        }}>
                            <UnorderedListOutlined /> {sequence ? '正序' : '倒序'}
                        </Button>
                    </div>
                    <div className={'content'}>
                        <div className={'news'}>
                            <Row>
                                <Col span={18}>
                                    <span>最新</span> {newChapter.chapterName}
                                </Col>
                                <Col className={'time'} span={6}>
                                    2019-11-21
                                </Col>
                            </Row>
                        </div>
                        <List
                            dataSource={chapterList}
                            size='small'
                            renderItem={ item => (
                                <List.Item style={{padding:'0'}}>
                                    <Link className={'list-item'} to={{pathname: '/reading', state: {
                                        novelInfo,
                                        orderNum: item.orderNum,
                                    }}} >
                                        <Row >
                                            <Col span={20}>
                                                {item.chapterName}
                                            </Col>
                                            <Col className={ this.chapterStatusStyleClassName(item.isVip, item.readed, item.bought) } span={4}>
                                                { this.chapterStatus(item.isVip, item.readed, item.bought) }
                                            </Col>
                                        </Row>
                                    </Link>
                                </List.Item>
                            )}
                        />
                    </div>
                    {/* <div className={"turn-page"}>
                        <Pagination className={"pagination"} simple defaultCurrent={2} total={100} />
                    </div> */}
                </div>
            </div>
        );
    }

    componentDidMount() {
        this.getChapterList();
    }

    getChapterList = async () => {
        Http.get('/Novel/getChapterList', { novelId: this.state.novelInfo.novelId }).then( respone => {
            this.setState({ chapterList: respone.resultData, newChapter: respone.resultData[respone.resultData.length -1]});
        })
    }

    chapterStatus = (isVip, isRead, isBought) => {
        if (isRead === 'Y') {
            return '已阅读';
        }
        if (isBought === 'Y') {
            return '已购买';
        }
        if (isVip === 'N') {
            return '免费';
        }
        if (isVip === 'Y') {
            return '收费';
        }
    }

    chapterStatusStyleClassName = (isVip, isRead, isBought) => {
        if (isRead === 'Y') {
            return 'price-canread';
        }
        if (isBought === 'Y') {
            return 'price-canread';
        }
        if (isVip === 'N') {
            return 'price-canread';
        }
        if (isVip === 'Y') {
            return 'price';
        }
    }

}
export default Catalogue;


